<template>
	<view class="container">
		<view v-for="item in plan" :key="item.planId">
			<view class="header" >
				<!--当前计划-->
				<view>
					{{item.planName}}
					<text>{{getTotal(item.planDays,item.planQuestions)}}道题</text>
				</view>
				<!--添加计划-->
				<navigator url="/pages/newPlan/newPlan" hover-class="navigator-hover">
					<view class="header2">
						<image src="../../static/images/加号.png"></image>
						<text>添加计划</text>
					</view>
				</navigator>
				
			</view>
			<!--计划内容-->
			<view class="planContent">
				<!--计划名字-->
				<view class="planName">
					<view><input placeholder="请输入计划名" v-model="item.planName"/></view>
					<view>
						<image src="../../static/images/删除.png"></image>
						<text click="deletePlan" :data-id="item.planId">删除</text>
					</view>
				</view>
				<!--计划完成日期-->
				<view class="planTime">
					<text>计划完成日期</text>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
				<!--计划内容-->
				<view class="planContentList">
					<view>
						<view>每天做题<text>(个)</text></view>
						<view>完成天数<text>(天)</text></view>
					</view>
				<view class="uni-picker">
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					    <picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="item">{{years[index]}}</view>
					    </picker-view-column>
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in months" :key="item">{{months[index]}}</view>
					    </picker-view-column>
					</picker-view>
					<!-- <view>
						<checkbox-group>
							<label>
								<checkbox value="cb" color="#E8815E" style="transform:scale(0.7)"/>
							</label>
						</checkbox-group>
					</view> -->
				</view>
				</view>
				<!--继续学习按钮-->
				<view>
					<button class="btn" click="updatePlan" :data-id="item.planId">继续学习该计划</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// onLoad:function(option){
		// 	console.log(option.id);
		// 	console.log(option.name);
		// },
		data() {
			 const currentDate = this.getDate({
			            format: true
			        });
			 const date = new Date()
			  // const years = []
			  const years = ['10','20','30','40','50','60'];
			  const year = date.getFullYear()
			  // const months = []
			  const months = ['36','30','24','18','12','6','5','4','3','2','1'];
			  const month = date.getMonth() + 1

	
			return {
				 title: 'picker',
				  plan:[],
				  date: currentDate,
				   title: 'picker-view',
				   years:['10','20','30','40','50','60'],
				   months:['36','30','24','18','12','6','5','4','3','2','1'],
				   value: [year, month -1],
				   visible:true,
				   indicatorStyle: `height: 50px;`,
				  
			};
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
		    },
			mounted() {
				//var that=this;
				//箭头函数指向是父级this指向
				this.getPlan();
			},
		methods: {
			
			getTotal(n,m){
				let value=n*m;
				return value;
			},
			 bindChange: function (e) {
			                const val = e.detail.value
			                this.year = this.years[val[0]]
			                this.month = this.months[val[1]]
			            },
			  bindDateChange: function(e) {
			            this.date = e.detail.value
			        },
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
				 year = year;
				} else if (type === 'end') {
				year = year + 3;
              }
			 month = month > 9 ? month : '0' + month;
			 day = day > 9 ? day : '0' + day;
			 return `${year}-${month}-${day}`;
			},
			getPlan: function () {
			    var self = this;  // 缓存this
			    uni.getStorage({
			        key: 'plan',
			        success: function (res) {
			            var data = {
			                planId: res.data
			            };
			            console.log(data);
			            uni.request({
			                url: "http://localhost:8888/getPlanById",
			                data: data,
			                success: function (res) {
			                    if (res.data.code == 0) {
			                        self.plan = res.data.data;
									uni.setStorage({
										key:'planQuestions',
										data:res.data.data.planQuestions,
										success() {
											console.log("1")
										}
									});
									uni.setStorage({
										key:'planDays',
										data:res.data.data.planDays,
										success() {
											console.log("2")
										}
									});
			                        self.$forceUpdate();
			                    } else {
			                        uni.showToast({
			                            title: res.data.message
			                        })
			                    }
			                }
			            });
			        }
			    });
			},
			deletePlan:function(e){
				var data={
					planId:e.target.dataset.id
				};
				console.log(e.target.dataset.id);
				uni.request({
					url:"http://localhost:8888/deletePlan",
					data:data,
					success:(res)=>{
						console.log(res);
						uni.showToast({
							title:res.data.message
						});
						uni.navigateTo({
							url:"/pages/plan/plan"
						})
						if(res.data.code==0){
							this.getUserList();
						}
					}
				})
			},
			updatePlan:function(){
				      // Gather all the data you want to submit
				      const data = {
				        // ... Other form data ...
				        planTime: `${this.date}`,
						planName:this.planName,
						planId:e.target.dataset.id,
						planQuestions:`${this.year}`,
						planDays:`${this.month}`,
						
				        // ... Add other properties from other input fields ...
				      };
				     console.log("yes",data);
				      // Assuming you are using uni.request to send data to the backend
				    uni.request({
				    url: 'http://localhost/updateById',
				    method: 'POST',
				    data: data,
				    success: function (res) {
				      // Handle the success response from the backend
				        console.log(res);
				    },
				    fail: function (err) {
				         // Handle the failure response from the backend
				        console.error(err);
					},
				 });
			},
		}
	}
</script>

<style>
.container{
	display: flex;
	flex-direction: column;
	width: 750rpx;
	height: 1150rpx;
	border-top: 0.05rpx solid #90A674;
	background-color: rgb(246 245 245);
}
.header{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	height: 180rpx;
	margin-top: 20rpx;

}
.header>view{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 250rpx;
	height: 160rpx;
	border-radius: 30rpx;
	box-shadow: 0 0 10rpx #90A674;  /*添加阴影效果 */
}
.header>view:nth-child(1){
	font-size: 38rpx;
	font-weight: bold;
	color: #90A674;
}
.header>view:nth-child(1) text{
		font-size: 24rpx;
		font-weight: normal;
		color: rgb(143, 143, 143);
}
.header2{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 250rpx;
	height: 160rpx;
	border-radius: 30rpx;
	box-shadow: 0 0 10rpx #90A674;  /*添加阴影效果 */
}
.header2 image{
		width:60rpx;
		height: 60rpx;
		opacity: 0.8;
}
.header2 text{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	color: #90A674;
}
.planContent{
	ddisplay: flex;
	flex-direction: column;
	width: 90%;
	height: 800rpx;
	margin-left: 40rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 0 2rpx #90A674;  /*添加阴影效果 */
}
.planName{
	display: flex;
	flex-direction: row;
	height: 100rpx;
	justify-content: space-between;
	/*box-shadow: 0 0 1rpx #90A674;  添加阴影效果 */
}
.planName>view:nth-child(1) input{
	width: 200rpx;
	height: 50rpx;
	margin-top: 20rpx;
	font-weight: bold;
	/* box-shadow: 0 0 3rpx #90A674; 添加阴影效果 */
}
.planName>view:nth-child(2){
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110rpx;
	height: 50rpx;
	margin-right: 20rpx;
	/* box-shadow: 0 0 3rpx #90A674; 添加阴影效果 */ 
}
.planName>view:nth-child(2) image{
	width: 40rpx;
	height: 40rpx;
	margin-right: 5rpx;
}
.planName>view:nth-child(2) text{
	font-size: 24rpx;
	color: #8f8f8f;
}
.planTime{
	display: flex;
	height: 60rpx;
	
}
.planTime>text{
	display: flex;
	width: 220rpx;
	margin-right: 1rpx;
	color: #8f8f8f;
}
.uni-input{
	color: #E8815E;
}
.planContentList{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 500rpx;
/* 	box-shadow: 0 0 3rpx #90A674; /* 添加阴影效果 */ 
	
}
.planContentList>view:nth-child(1){
	width: 100%;
	height: 50rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-left: 30rpx;
}
.planContentList>view:nth-child(1)>view{
	display: flex;
	width: 250rpx;
	justify-content: center;
	/*box-shadow: 0 0 3rpx #90A674;  添加阴影效果 */
}
.planContentList>view:nth-child(1)>view text{
	color: #8f8f8f;
}
.planContentList>view:nth-child(1)>view:nth-child(2){
	margin-right: 100rpx;
}
.uni-picker {
	margin-top: 50rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 30rpx;
  width: 700rpx;
  height: 100vh;
}
.picker-view {
		width: 600rpx;
		height: 420rpx;
		margin-top: 10rpx;
}
.item {
	line-height: 100rpx;
	text-align: center;
	margin-left: 30rpx;
	}

.btn{
		display: flex;
		width: 350rpx;
		height: 80rpx;
		margin-top: 50rpx;
		border-radius: 80rpx;
		align-items: center;
		justify-content: center;
		color: white;
		background-color: #90A674;;
	}
</style>
